<template>
  <div class="header">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item  :to="{ path: '/' }">首页</el-breadcrumb-item>

      <!-- <el-breadcrumb-item  :to="{ path: '/' }" v-if="path==='hellow'">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item :to="{ path: '/' }" v-if="path==='account'">会员</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "header-component",
  data(){
    return{
      path:''
    }
  },
  mounted(){
    // console.log(this.$route.path.split('/').splice(1))
  },
  watch:{
    $route(){
      this.path = this.$route.path.split('/').splice(1)[this.$route.path.split('/').splice(1).length-1]
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  margin-top: 60px;
  width: 100%;
  height: 30px;
  /* text-align: center; */
  line-height: 50px;
  border-bottom: 1px solid black;

  /* border-bottom: 1px solid black; */
}
</style>
